<template>
  <div class="courseVideo">
    <el-card>
      <div slot="header">
        <div>课程:</div>
        <div>阶段:</div>
        <div>课时:</div>
      </div>
      <el-form label-width="70px">
        <el-form-item label="视频上传">
          <input ref="videoFile" type="file" />
        </el-form-item>
        <el-form-item label="封面上传">
          <input ref="imgFile" type="file" />
        </el-form-item>
        <el-form-item label="视频上传">
          <el-button type="primary" @click="handleUpload">开始上传</el-button>
          <el-button @click="$router.go(-1)">返回</el-button>
        </el-form-item>
        <el-form>
          <div v-if="isStart">上传中:{{ percent + "%" }}</div>
          <div v-if="isUploadSuccess">
            转码中:{{ isTransSuccess ? "转码中" : "正在转码" }}
          </div>
        </el-form>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts">
/*eslint-disable */
import Vue from "vue";
import {
  getImgAuth,
  getVideoAuth,
  transCodeRequest,
  transCodePercent
} from "./api/index";
export default Vue.extend({
  data() {
    return {
      uploader: null,
      imageUrl: "",
      videoId: null,
      percent: 0,
      isUploadSuccess: false,
      isTransSuccess: false,
      isStart: false
    };
  },
  async created() {
    this.initUploader();
    const res = await transCodePercent(1);
    console.log(res);
  },
  computed: {
    videoFile() {
      return this.$refs.videoFile;
    },
    imgFile() {
      return this.$refs.imgFile;
    }
  },
  methods: {
    initUploader() {
      this.uploader = new window.AliyunUpload.Vod({
        // 阿里账号ID，必须有值 ，值的来源https://help.aliyun.com/knowledge_detail/37196.html
        userId: "1618139964448548",
        // 上传到点播的地域， 默认值为'cn-shanghai',//eu-central-1,ap-southeast-1
        region: "",
        // 分片大小默认1M，不能小于100K
        partSize: 1048576,
        // 并行上传分片个数，默认5
        parallel: 5,
        // 网络原因失败时，重新上传次数，默认为3
        retryCount: 3,
        // 网络原因失败时，重新上传间隔时间，默认为2秒
        retryDuration: 2,
        // 开始上传
        onUploadstarted: async uploadInfo => {
          console.log("start", uploadInfo);
          let uploadAddressAndAuth = null;
          if (uploadInfo.isImage) {
            const { data } = await getImgAuth();
            console.log(data);
            this.imageUrl = data.data.imageURL;
            uploadAddressAndAuth = data.data;
          } else {
            const { data } = await getVideoAuth({
              fileName: uploadInfo.file.name,
              imageUrl: this.imageUrl
            });
            console.log(data);
            uploadAddressAndAuth = data.data;
            this.videoId = uploadAddressAndAuth.videoId;
          }
          this.uploader.setUploadAuthAndAddress(
            uploadInfo,
            uploadAddressAndAuth.uploadAuth,
            uploadAddressAndAuth.uploadAddress,
            uploadAddressAndAuth.imageId || uploadAddressAndAuth.videoId
          );
        },
        // 文件上传成功
        onUploadSucceed: uploadInfo => {
          console.log("success", uploadInfo);
        },
        // 文件上传失败
        onUploadFailed: (uploadInfo, code, message) => {
          console.log("fail", uploadInfo);
        },
        // 文件上传进度，单位：字节
        onUploadProgress: (uploadInfo, totalSize, loadedPercent) => {
          console.log("Progress", uploadInfo, loadedPercent);
          if (!uploadInfo.isImage) {
            this.percent = Math.floor(loadedPercent * 100);
          }
        },
        // 上传凭证超时
        onUploadTokenExpired: uploadInfo => {
          console.log("Expired", uploadInfo);
        },
        // 全部文件上传结束
        onUploadEnd: async uploadInfo => {
          console.log("end", uploadInfo);
          this.isUploadSuccess = true;
          const { data } = await transCodeRequest({
            lessonId: this.$route.query.lessonId,
            coverImageUrl: this.imageUrl,
            fileName: this.videoFile.files[0].name,
            fileId: this.videoId
            // sectionId: this.$route.query.sectionId
          });
          console.log(data);
          let n = 0;
          const timer = setInterval(async () => {
            const res = await transCodePercent(this.$route.query.lessonId);
            console.log(res);
            n++;
            if (res.data.data === 100) {
              console.log("endTranCode");
              this.isTransSuccess = true;
              this.$message.success("操作成功");
              clearInterval(timer);
            }
            if (n === 10) {
              n = 0;
              this.$message.error("转码超时，服务器异常");
              clearInterval(timer);
            }
          }, 3000);
        }
      });
    },
    handleUpload() {
      this.percent = 0;
      this.isUploadSuccess = false;
      this.isTransSuccess = false;
      this.isStart = true;
      console.log("uu");
      const videoFile = this.videoFile.files[0];
      const imgFile = this.imgFile.files[0];
      console.log(videoFile);
      console.log(imgFile);
      const paramData = '{"Vod":{}}';
      this.uploader.addFile(imgFile, null, null, null, paramData);
      this.uploader.addFile(videoFile, null, null, null, paramData);

      this.uploader.startUpload();
    }
  }
});
</script>

<style lang="scss" scoped></style>
